import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaNewScroll } from 'ecCom';

import './style/pt-menu.less';
import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';

@inject('portalThemeStore')
@observer
class E9LeftMenu extends React.Component {
  constructor(props) {
    super(props);
    this.getLeftMenu = this.getLeftMenu.bind(this);
    this.onTitleClick = this.onTitleClick.bind(this);
    this.onSelect = this.onSelect.bind(this);
    this.getData = this.getData.bind(this);
    this.setHeight = this.setHeight.bind(this);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { themeInfo, frontEndMenu = [], leftMenuObj } = portalThemeStore;

    const { themeData = {} } = themeInfo;
    const { styleConfig = {} } = themeData;
    const { leftmenu = {} } = styleConfig;
    const fontSize = parseInt(leftmenu.titleFontSize || '12px');

    const { leftMenuSelected = {} } = leftMenuObj;
    const _frontEndMenu = toJS(frontEndMenu);
    const _leftMenuSelected = toJS(leftMenuSelected);
    const _selectedKeys = [_leftMenuSelected.id || ''];

    return (
      <div className={`e9left-container wea-f${fontSize}`}>
        <WeaNewScroll ecId={`${(this && this.props && this.props.ecId) || ''}_WeaNewScroll@wog2cl`} height="100%">
          <Menu
            ecId={`${(this && this.props && this.props.ecId) || ''}_Menu@xsqy22`}
            ref={(ref) => (this.menuRef = ref)}
            mode="vertical"
            prefixCls="pt-menu"
            openAnimation="zoom"
            subMenuCloseDelay={0.2}
            selectedKeys={_selectedKeys}
            onClick={this.onSelect}
            onOpenChange={this.setHeight}
          >
            {this.getLeftMenu(_frontEndMenu, 1, fontSize, _selectedKeys[0])}
          </Menu>
        </WeaNewScroll>
      </div>
    );
  }

  getLeftMenu(data, level, fontSize, _selectedKeys) {
    const { portalThemeStore } = this.props;
    const { translatepage } = portalThemeStore;

    return data.map((item) => {
      const name = translatepage == '1' ? (item.fname ? item.fname : item.name) : item.name;

      if (item.child && item.child.length) {
        return (
          <SubMenu
            ecId={`${(this && this.props && this.props.ecId) || ''}_SubMenu@zgy0bq@${item.id}`}
            key={item.id}
            popupClassName={`e9left-sub-container wea-f${fontSize}`}
            title={
              level == 1 ? (
                <span className="e9aside-top-menu-icon">
                  {item.iconType == '2' && item.iconImgSrc ? (
                    <img src={item.iconImgSrc} alt="" />
                  ) : item.icon ? (
                    <i className={item.icon} />
                  ) : (
                    <i className={`wevicon-top-menu-default wevicon-top-menu-${item.infoId || 0}`} />
                  )}
                  <span title={name}>{name}</span>
                </span>
              ) : (
                <span title={name}>{name}</span>
              )
            }
            className={_selectedKeys == item.id ? 'e9left3-e9submenu-selected' : 'e9left3-e9submenu-unselected'}
            data={item}
            onTitleClick={() => this.onTitleClick(item)}
          >
            {this.getLeftMenu(item.child, level + 1, fontSize, _selectedKeys)}
          </SubMenu>
        );
      }

      return (
        <MenuItem ecId={`${(this && this.props && this.props.ecId) || ''}_MenuItem@wcqbr0@${item.id}`} key={item.id} data={item}>
          {level == 1 ? (
            <div className="pt-menu-item-title">
              <span className="e9aside-top-menu-icon">
                {item.iconType == '2' && item.iconImgSrc ? (
                  <img src={item.iconImgSrc} alt="" />
                ) : item.icon ? (
                  <i className={item.icon} />
                ) : (
                  <i className={`wevicon-top-menu-default wevicon-top-menu-${item.infoId || 0}`} />
                )}
                <span title={name}>{name}</span>
              </span>
            </div>
          ) : (
            <span title={name}>{name}</span>
          )}
        </MenuItem>
      );
    });
  }

  setHeight() {
    if ($('.pt-menu-submenu-popup ul').length > 0) {
      $('.pt-menu-submenu-popup ul').css({ 'max-height': $(window).height() - 20, 'overflow-x': 'hidden', 'overflow-y': 'auto' });
    }
  }

  onTitleClick(data) {
    const { portalThemeStore } = this.props;
    if (data.mobxrouteurl || data.fullrouteurl || (data.url && data.url != 'javascript:void(0);')) {
      portalThemeStore.onLeftMenuSelectedChange(data);
      portalThemeStore.onLoadMain(data);
    } else if (data.child && data.child.length) {
      let item = data.child[0];

      if (data.url != '') {
        for (;;) {
          if (item.mobxrouteurl || item.fullrouteurl || (item.url && item.url != 'javascript:void(0);')) {
            portalThemeStore.onLeftMenuSelectedChange(item);
            portalThemeStore.onLoadMain(item);
            break;
          } else if (item.child && item.child.length) {
            item = item.child[0];
          } else {
            break;
          }
        }
      } else {
        // 当前菜单不存在url，获取当前菜单的下级菜单url
        this.getData(item, 1);
      }
    }
  }

  getData(data, level) {
    if (data.mobxrouteurl || data.fullrouteurl || (data.url && data.url != 'javascript:void(0);')) {
      const { portalThemeStore } = this.props;
      portalThemeStore.onLeftMenuSelectedChange(data);
      portalThemeStore.onLoadMain(data);
    } else if (data.child && data.child.length) {
      const item = data.child[0];
      this.getData(item, level + 1);
    }
  }

  onSelect(e) {
    const { data } = e.item.props;

    const { portalThemeStore } = this.props;
    portalThemeStore.onLeftMenuSelectedChange(data);
    portalThemeStore.onLoadMain(data);

    if (this.menuRef && this.menuRef.store) {
      this.menuRef.store.setState({ openKeys: [] });
    }
  }
}

export default E9LeftMenu;
